/*红圆点*/

.dot {
    position: relative;
    display: inline-block;
    padding: 0 6px * @ratio;
    line-height: 22px * @ratio;
    &:after {
        content: '';
        display: block;
        width: 8px;
        height: 8px;
        background-color: #999;
        border-radius: 50%;
        background-clip: padding-box;
    }
    &.dot-red:after {
        background-color: #f74c31;
    }
    &.dot-right-top:after {
        position: absolute;
        right: -3px * @ratio;
        top: -3px * @ratio;
    }
    &.dot-sm:after {
        width: 6px * @ratio;
        height: 6px * @ratio;
    }
    &.dot-lg:after {
        width: 12px * @ratio;
        height: 12px * @ratio;
        right: -6px * @ratio;
        top: -6px * @ratio;
    }
}
